<script setup lang="js">


import {computed, defineProps, onMounted, ref, watch, watchEffect} from "vue";
import {champion_store, staticAssertsStore} from "@/renderer/main-window/stores/storeAsserts.js";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";

const {championId, size, shape} = defineProps({
  "championId": {
    type: Number
  },
  "size": {
    default: 'small'
  },
  "shape": {
    type: String,
    default: 'square'
  },
  "champLevel":{
    type: Number,
  }
})

const src = computed(() => {
  const uri = staticAssertsStore().getAssertSync({
    "key": champion_store,
    "id": championId
  })?.squarePortraitPath;

  if (uri === undefined) {
    return "";
  } else {
    return `${storeSystemCertificateInfo().getImgProxyPrefix()}${uri}`;
    ;
  }
})

</script>

<template>
  <template v-if="champLevel">

     <div style="position: relative">
       <el-avatar :src="src" :size="size" :shape="shape">
       </el-avatar>
       <el-tag
           type="info"
           size="small"
           style="position: absolute;padding: 0;width: 20px;height: 15px;opacity: 0.8"
           :style="{
             'top':`${size-10}px`,
             'right':`${size/2-10}px`
           }"
       >{{champLevel}}</el-tag>
     </div>


  </template>
  <template v-else>
    <el-avatar :src="src" :size="size" :shape="shape">
    </el-avatar>
  </template>

</template>

<style scoped>

</style>